<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./v4.6.5-dist/ol.css">
    <title>图层控制</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 80%;
            height: 80%;
            margin: 0 auto;
        }
    </style>
    <script src="./v4.6.5-dist/ol.js"></script>
</head>
<body>
<div id="map">

</div>
<div style="text-align: center">
    <input type="checkbox" checked="checked" onclick="checkOsm(this)">底图
    <input type="checkbox" checked="checked" onclick="checkCircle(this)">圆
    <input type="checkbox" checked="checked" onclick="checkPoint(this)">点
</div>
<div style="text-align: center">
    <input name="seq" type="radio" value="" onclick="upOsm(this);"/>底图最上
    <input name="seq" type="radio" value="" checked="checked" onclick="upCircle(this);"/>圆最上
    <input name="seq" type="radio" value="" onclick="upPoint(this);"/>点最上
</div>
<script>

    /*
     *
     *   this.submitform = {
     textURL: "",
     LAYERS: "",
     STYLES: "",
     CQL_FILTER: "",
     layer: "",
     matrixSet: "",
     format: "",
     style: "",
     delivery: true
     }
     *
     * */
    //创建3个图层
    var osmLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
        })
    })
    var pointLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: "./kunyushan.json",
            format: new ol.format.GeoJSON()// 解析矢量地图的格式化类
        }),
    });
    var circleLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });

    new ol.Map({
        // 在地图上添加上面创建的三个图层，图层顺序自下而上，依次是osm，point，circle
        layers: [osmLayer, pointLayer, circleLayer],
        view: new ol.View({
            // 设置成都为地图中心
            center: [121.77, 37.31],
            // 指定投影使用EPSG:4326
            projection: 'EPSG:4326',
            zoom: 8
        }),
        target: 'map'
    });

    //添加点
    var point = new ol.Feature({
        geometry: new ol.geom.Point([121.77, 37.31])
    })
    point.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'red'
            }),
            stroke: new ol.style.Stroke({
                color: 'green',
                size: 1
            })
        })
    }));
    pointLayer.getSource().addFeature(point);

    // 添加圆
    var circle = new ol.Feature({
        geometry: new ol.geom.Point([121.77, 37.31])
    });
    circle.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
            radius: 100,
            stroke: new ol.style.Stroke({
                color: 'blue',
                size: 1
            })
        })
    }));
    circleLayer.getSource().addFeature(circle);

    function checkOsm(elem) {
        osmLayer.setVisible(elem.checked);
    }

    function checkCircle(e) {
        circleLayer.setVisible(e.checked);
    }

    function checkPoint(e) {
        pointLayer.setVisible(e.checked);
    }

    function upOsm(e) {
        if (e.checked) {
            osmLayer.setZIndex(3);
            circleLayer.setZIndex(circleLayer.getZIndex() - 1);
            pointLayer.setZIndex(pointLayer.getZIndex() - 1);
        }
    }
    function upCircle(e) {
        if (e.checked) {
            circleLayer.setZIndex(3);
            osmLayer.setZIndex(osmLayer.getZIndex() - 1);
            pointLayer.setZIndex(pointLayer.getZIndex() - 1);
        }
    }
    function upPoint(e) {
        if (e.checked) {
            pointLayer.setZIndex(3);
            osmLayer.setZIndex(osmLayer.getZIndex() - 1);
            circleLayer.setZIndex(circleLayer.getZIndex() - 1);
        }
    }
</script>

</body>
</html>